<template>
  <div>
    <el-dialog :visible="dialogVisible" :show-close="false" width="651px">
      <div class="dialog-box">
        <div class="head">
          <span> 工作日志 </span>
          <img
            src="@/assets/equipment_icon_close.png"
            alt=""
            @click="handleClose"
          />
        </div>
        <div class="centent">
          <div v-for="(item, index) in data" :key="item.id" class="centent-li">
            <div class="title-name pl26">
              <img src="@/assets/title_img.png" alt="" />
              <div class="name">{{ item.titleName }}</div>
              <div class="state-btn">
                {{ item.statevalue === 1 ? "自定义" : "非自定义" }}
              </div>
            </div>
            <div class="create-title pl49">{{ item.createName }}</div>
            <div class="create-title pl49">{{ item.uploadName }}</div>
            <div class="select-box pl49">
              <div class="select-li">
                <span class="select-name">届时所处进度：</span>
                <el-select
                  v-model="item.selectSchedule"
                  placeholder="请选择"
                  style="width: 170px; margin: 0 20px 0 10px"
                >
                  <el-option
                    v-for="ite in selectScheduleOptions"
                    :key="ite.value"
                    :label="ite.label"
                    :value="ite.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="select-li">
                <span class="select-name">届时所处业务环节：</span>
                <el-select
                  v-model="item.linkSchedule"
                  placeholder="请选择"
                  style="width: 170px"
                >
                  <el-option
                    v-for="i in linkScheduleOptions"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="briefing pl49">
              <span class="select-name">日志简报：</span>
              <el-input
                type="textarea"
                class="textarea"
                placeholder=""
                v-model="item.briefing"
              >
              </el-input>
            </div>
            <div class="upload-box">
              <span class="select-name pl49">佐证材料：</span>
              <el-upload
                class="upload-demo"
                action=""
                :file-list="fileList"
                list-type="picture"
              >
                <div class="upload-btn">添加</div>
              </el-upload>
            </div>
            <div class="img-list pl133">
              <img
                v-if="leftImgState(item.materialList.length)"
                src="@/assets/left_img.png"
                alt=""
                class="operation-img"
              />
              <div class="img-li">
                <img
                  v-for="it in item.materialList"
                  :key="it.id"
                  :src="it.img"
                  alt=""
                />
              </div>
              <img
                v-if="rightImgState(item.materialList.length)"
                src="@/assets/right_img.png"
                alt=""
                class="operation-img"
              />
            </div>
            <div v-if="index !== data.length - 1" class="line"></div>
          </div>
        </div>
      </div>
    </el-dialog>
    <div v-if="dialogVisible" class="operation-btn">
      <div
        v-for="item in btnList"
        :key="item.id"
        class="my-btn"
        :class="{ 'active-btn': activeBtnState === item.id }"
        @click="clickBtn(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "myDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    }, // 弹窗状态
  },
  components: {},
  data() {
    return {
      fileList: [], // 上传资料list
      activeBtnState: 5, // 选中操作按钮状态
      btnList: [
        {
          name: "返回顶部",
          id: 1,
        },
        {
          name: "暂存",
          id: 2,
        },
        {
          name: "保存发起",
          id: 3,
        },
        {
          name: "返回",
          id: 4,
        },
        {
          name: "工作日志",
          id: 5,
        },
      ],
      linkScheduleOptions: [
        { value: "1", label: "暂存" },
        { value: "2", label: "非暂存" },
      ],
      selectScheduleOptions: [
        { value: "1", label: "暂存" },
        { value: "2", label: "非暂存" },
      ],
      data: [
        {
          titleName: "日志1标题:默认当时所处进度+业务环节+追加日志人员",
          statevalue: 1, // 自定义按钮
          createName: "由某某某于NNNN年NN月NN日创建", // 创建人
          uploadName: "由某某某于NNNN年NN月NN日最后更新", // 更新提示
          selectSchedule: "1", // 进度值
          linkSchedule: "1", // 环节值
          briefing: "", // 日志简报
          materialList: [
            { img: require("@/assets/1.png") },
            { img: require("@/assets/2.png") },
          ], // 上传材料list
        },
        {
          titleName: "日志1标题:默认当时所处进度+业务环节+追加日志人员",
          statevalue: 2, // 自定义按钮
          createName: "由某某某于NNNN年NN月NN日创建", // 创建人
          uploadName: "由某某某于NNNN年NN月NN日最后更新", // 更新提示
          selectSchedule: "", // 进度值
          linkSchedule: "", // 环节值
          briefing: "", // 日志简报
          materialList: [], // 上传材料list
        },
      ],
    };
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      console.log(4654);
      this.$emit("handleClose");
    },
    // 按钮操作
    clickBtn(id) {
      this.activeBtnState = id;
    },
    leftImgState(value) {
      if (value === 0) {
        return false;
      } else {
        return true;
      }

      // 还需要有判断第几页需要有左右按钮逻辑
    },
    rightImgState(value) {
      if (value === 0 || value <= 3) {
        return false;
      } else {
        return true;
      }
      // 还需要有判断第几页需要有左右按钮逻辑
    },
  },
  mounted() {
    console.log(333);
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
